import { withRouter } from 'next/router'
import React from 'react'
import MyLayout from '../../components/layout'
import Head from 'next/head';
import { APPLICATION, INDEX_TXT } from '../../config/constant'
import styles from './index.module.less'
import Banner from './banner'
import { IndexTitle } from '../../components/MyTitle'
import ChannelBig from './channel_big'
import ChannelSmall from './channel_small';
import Notebook from './notebook'

class Index extends React.Component {
  constructor(props) {
    super(props)
  }
  render () {
    return (
      <div className={styles.index_cont}>
        <Head>
          <title>{APPLICATION}&raquo;{INDEX_TXT}</title>
        </Head>
        <MyLayout>
          <div className={styles.container}>
            <Banner />

            <div className={styles.toolsbar}>
            </div>

            <div className={styles.choiceness}>
              <IndexTitle title="每天更新" />
              <div className={styles.choiceness_cont}>
                <Notebook />
              </div>
            </div>

            <div className={styles.channel}>
              <IndexTitle title="频道广场" />
              <div className={styles.channel_gird}>
                <div className={styles.lt}>
                  <div className={`${styles.channel_item} ${styles.channel_item_big}`}>
                    <ChannelBig />
                  </div>
                </div>
                <div className={styles.rt}>
                  <div className={`${styles.channel_item} ${styles.channel_item_small}`}>
                    <ChannelSmall />
                  </div>
                  <div className={`${styles.channel_item} ${styles.channel_item_small}`}>
                    <ChannelSmall />
                  </div>
                  <div className={`${styles.channel_item} ${styles.channel_item_small}`}>
                    <ChannelSmall />
                  </div>
                  <div className={`${styles.channel_item} ${styles.channel_item_small}`}>
                    <ChannelSmall />
                  </div>
                </div>
              </div>

              <div className={styles.channel_gird}>
                <div className={styles.lt}>
                  <div className={`${styles.channel_item} ${styles.channel_item_big}`}>
                    <ChannelBig />
                  </div>
                </div>
                <div className={styles.rt}>
                  <div className={`${styles.channel_item} ${styles.channel_item_small}`}>
                    <ChannelSmall />
                  </div>
                  <div className={`${styles.channel_item} ${styles.channel_item_small}`}>
                    <ChannelSmall />
                  </div>
                  <div className={`${styles.channel_item} ${styles.channel_item_small}`}>
                    <ChannelSmall />
                  </div>
                  <div className={`${styles.channel_item} ${styles.channel_item_small}`}>
                    <ChannelSmall />
                  </div>
                </div>
              </div>
            </div>

            <div className={styles.footer}>
              <div className={styles.mod_service}>
                <ul className={styles.mod_list}>
                  <li className={styles.mod_service_item}>
                    <div className={styles.mod_service_unit}>
                      <h5 className={styles.mod_service_tt}>多</h5>
                      <p className={styles.mod_service_txt}>品类齐全，轻松购物</p>
                    </div>
                  </li>
                  <li className={styles.mod_service_item}>
                    <div className={styles.mod_service_unit}>
                      <h5 className={styles.mod_service_tt}>多</h5>
                      <p className={styles.mod_service_txt}>品类齐全，轻松购物</p>
                    </div>
                  </li>
                  <li className={styles.mod_service_item}>
                    <div className={styles.mod_service_unit}>
                      <h5 className={styles.mod_service_tt}>多</h5>
                      <p className={styles.mod_service_txt}>品类齐全，轻松购物</p>
                    </div>
                  </li>
                  <li className={styles.mod_service_item}>
                    <div className={styles.mod_service_unit}>
                      <h5 className={styles.mod_service_tt}>多</h5>
                      <p className={styles.mod_service_txt}>品类齐全，轻松购物</p>
                    </div>
                  </li>
                </ul>
              </div>

              <div className={styles.relation}>
                <div className={styles.lt}>
                  <p className={styles.zs}>
                    说点什么呢！
                  </p>
                  <div className={styles.cont}>
                    <p className={styles.txt}>
                      据不完全统计<br />超过上百万家单位<span>没有</span><br />与我合作
                  </p>
                  </div>
                </div>
                <div className={styles.rt}>
                  <div className={styles.zs}>快捷入口</div>
                  <div className={styles.relation_list}>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.react}></h5>
                      <span>React</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.vue}></h5>
                      <span>Vue</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.bootstrap}></h5>
                      <span>Bootstrap</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.react}></h5>
                      <span>React</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.vue}></h5>
                      <span>Vue</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.bootstrap}></h5>
                      <span>Bootstrap</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.react}></h5>
                      <span>React</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.vue}></h5>
                      <span>Vue</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.bootstrap}></h5>
                      <span>Bootstrap</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.react}></h5>
                      <span>React</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.vue}></h5>
                      <span>Vue</span>
                    </div>
                    <div className={styles.relation_list_item}>
                      <h5 className={styles.bootstrap}></h5>
                      <span>Bootstrap</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </MyLayout>
      </div>
    )
  }
}
export default withRouter(Index)